% V20210224 - 19 GW Tips and Tricks

% These are the HTML attributes corresponding to an app in light mode.
ARRAY.LOAD lite_attr$[], "='a'", "invert(0%" %, "#fff", "#ccc", "#0000ff", "#aaaaff", "#aaaaaa"

% These are the HTML attributes corresponding to an app in dark mode.
ARRAY.LOAD dark_attr$[], "='b'", "invert(100%" %, "#000", "#333", "#ffff00", "#888800", "#888888"

% Count the number of attributes to be changed, for later.
ARRAY.LENGTH n_attr, dark_attr$[]

% Load the GW library.
INCLUDE "GW.bas"

% Create the two modes (light mode by default).
light = GW_NEW_THEME_CUSTO("color='a'")
dark  = GW_NEW_THEME_CUSTO("color='b'")

% Create a page in light mode.
GW_USE_THEME_CUSTO(light)
p = GW_NEW_PAGE()

% Prepare title bar string.
Title$ = GW_ADD_BAR_TITLE$("Light/Dark Mode Demo")

% Prepare an 'eye' bar button.
GW_USE_THEME_CUSTO_ONCE("icon=eye notext")
Lbtn$ = GW_ADD_BAR_LBUTTON$(">CHMODE")

% Add the title bar.
GW_ADD_TITLEBAR(p, Lbtn$ + Title$)

% Add a panel.
panel = GW_ADD_PANEL(p, "<h1>I'm a panel</h1>\n<p>Tap outside of me to close me.</p>")

% Add a link to open the panel.
GW_ADD_LINK(p, "Open the panel.", GW_SHOW_PANEL$(panel))

% Add an inputline.
GW_ADD_INPUTPASSWORD(p, "Type your password:", "")

% Create a css class.
logo_css$ =".ico{width:150px;filter:invert(0%)}"
GW_INJECT_CSS(p, logo_css$)

% Add an app logo = a black PNG on fully transparent background.
GW_START_CENTER(p)
GW_USE_THEME_CUSTO_ONCE("class=ico")
GW_ADD_IMAGE(p, "http://mougino.free.fr/tmp/kihoskh.png")
GW_STOP_CENTER(p)

% Add a button.
GW_ADD_BUTTON(p, "Exit the App", "BACK")

% Now show the page.
GW_RENDER(p)

DO
 % Wait for user action.
 r$ = GW_WAIT_ACTION$()

 % User clicked the 'eye' button.
 IF r$ = "CHMODE"

  % Reverse light mode <-> dark mode
  dark_mode = 1 - dark_mode

  % Retrieve the HTML code of the page.
  html_page$ = GW_PAGE$(p)

  % Modify its attributes!
  FOR i = 1 TO n_attr
   IF dark_mode % target = dark mode
    html_page$ = REPLACE$(html_page$, lite_attr$[i], dark_attr$[i])
   ELSE         % target = light mode
    html_page$ = REPLACE$(html_page$, dark_attr$[i], lite_attr$[i])
   ENDIF
  NEXT

  % Replace the HTML code of the page.
  GW_SET_SKEY("page", p, html_page$)

  % Render the (modified) page!
  GW_RENDER(p)

 ENDIF

% End when BACK key is pressed.
UNTIL r$ = "BACK"

END "End of Light/Dark Mode Demo."